<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/nft.ico" />
    <title>帮助文档的目录</title>
    <!-- vue3 -->
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <!-- element-plus 的 css -->
    <link href="https://unpkg.com/element-plus@2.0.6/dist/index.css" rel="stylesheet"/>
    <!-- element-plus -->
    <script src="https://unpkg.com/element-plus@2.0.6/dist/index.full.js"></script>
  </head>
  <body style="margin: 20px;">
    <div id="app">
      <el-skeleton :loading="loading">
        <h1>帮助文档的目录：</h1>
        <el-row gutter="20">
          <el-col :span="24">
            类库：
            <el-card shadow="always" style="margin: 10px;"
              v-for="(item, index) in listSource"
              :key="index"
            >
              <el-link type="warning" :href="item.href" target="_blank">
                {{item.title}}
              </el-link>
              <p v-html="item.remark"></p>
              <br>
              <el-link type="danger" :href="item.online" target="_blank">
                在线演示
              </el-link><br>
            </el-card>
          </el-col>
          <el-col :span="12">
            UI库项目：
            <el-card shadow="always" style="margin: 10px;"
              v-for="(item, index) in listProject"
              :key="index"
            >
              <el-link type="warning" :href="item.href" target="_blank">
                {{item.title}}
              </el-link>
              <p v-html="item.remark"></p>
              <br>
              <el-link type="danger" :href="item.online" target="_blank">
                在线演示
              </el-link><br>
            </el-card>
          </el-col>
          <el-col :span="12">
            其他项目：
            <el-card shadow="always" style="margin: 10px;"
              v-for="(item, index) in listOther"
              :key="index"
            >
              <el-link type="warning" :href="item.href" target="_blank">
                {{item.title}}
              </el-link>
              <p v-html="item.remark"></p>
              <br>
              <el-link type="danger" :href="item.online" target="_blank">
                在线演示
              </el-link><br>
            </el-card>
          </el-col>
        </el-row>
        <el-input
          v-model="areaList"
          :rows="5"
          type="textarea"
          placeholder="Please input"
          style="width: 500px;"
        />
      </el-skeleton>
    </div>
    
    <script>
      const { reactive, ref, onMounted } = Vue

      // 类库
      const listSource = reactive([
        {
          title: 'nf-Press 的文档',
          href: 'https://gitee.com/nfpress/nf-press-edit',
          online: 'https://nfpress.gitee.io/nf-press-edit/',
          remark: '提供在线编辑文档、展示文档的组件。可以用这些组件方便的搭建自己的帮助文档的网站。'
        }
      ])

      // 项目
      const listProject = reactive([
        {
          title: '二次封装UI库的共用属性和函数 的文档',
          href: 'https://gitee.com/nfpress/doc-ui-core',
          online: ' https://nfpress.gitee.io/doc-ui-core/',
          remark: '二次封装UI库的共用属性和函数，便于统一风格和复用代码。'
        },
        {
          title: '二次封装 ElementPlus 的文档',
          href: 'https://gitee.com/nfpress/doc-ui-elp',
          online: 'https://nfpress.gitee.io/doc-ui-elp',
          remark: '封装一下 ElementPlus，实现低代码工具。'
        }
      ])

      // 演示
      const listOther = reactive([
        {
          title: 'indexedDB、webSQL的help 的文档',
          href: 'https://gitee.com/nfpress/doc-webstorage',
          online: 'https://nfpress.gitee.io/doc-webstorage/',
          remark: '开源项目设计的功能，基本都会在这里演示'
        }
      ])

      const getAreaList = () => {
        const arr = []
        arr.push('\n1. 类库：')
        listSource.forEach(item => {
          arr.push(`    * [${item.title}](${item.href})`)
        })
        arr.push('\n2. UI库：')
        listProject.forEach(item => {
          arr.push(`    * [${item.title}](${item.href})`)
        })
        arr.push('\n3. 其他：')
        listOther.forEach(item => {
          arr.push(`    * [${item.title}](${item.href})`)
        })

        return arr.join('\n')
      }

      const App = {
        setup () {
          const message = '做个目录'
          const loading = ref(true)
          const areaList = getAreaList()

          onMounted(() => {
            loading.value = false
          })

          return {
            areaList,
            listSource,
            listProject,
            listOther,
            message,
            loading
          }
        }
      }
      const app = Vue.createApp(App)
      app.use(ElementPlus).mount("#app")
    </script>
  </body>
</html>
